<template>
	<view class="info" style="padding-bottom: 100rpx;">
		<view class="infoConter">
			<!-- <view class="title">群成员({{member.length}})</view> -->
			<view class="conterList">
				<!-- @click="navigateTo(item)" -->
				<image v-if="index<=22 || quanbu" class="im" v-for="(item,index) in member"   :src="staticPhoto+item.photo?(staticPhoto+item.photo):avatar" mode=""></image>
				<button class="im im-conterList" open-type="share"></button>
			</view>
			<view class="" v-if="!quanbu && member.length>23" style="text-align: center;font-size: 28rpx;color: #ccc;display: flex;align-items: center;justify-content: center;">
				<view @click="quanbu=true" style="display: flex;align-items: center;">
					查看更多群成员 <image class="icon-conter"  src="../../static/left-icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="genex">
			<view class="genexList">
				<view class="title">我的ID号</view>
				<view class="right">
					{{user_info.id}}
					 <image class="icon-conter" src="../../static/left-icon.png" mode=""></image>
				</view>
			</view>
			<view class="genexList" @click="goPages_ok('/pages/personalData/index')">
				<view class="title">个人资料</view>
				<view class="right">
					{{user_info.username}} <image class="icon-conter" src="../../static/left-icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="genex">
			<view class="genexList" @click="goPages_ok('/pages/Chathistory/index')">
				<view class="title">查找聊天记录</view>
				<view class="right">
					 <image class="icon-conter" src="../../static/left-icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="genex" @click="goPages_ok('/pages/index/poster')">
			<view class="genexList">
				<view class="title">邀请二维码</view>
				<view class="right">
					 <image class="icon-conter" src="../../static/left-icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="genex" @click="goPages_ok('/pages/Chathistory/invite')">
			<view class="genexList">
				<view class="title">我的邀请</view>
				<view class="right">
					 <image class="icon-conter" src="../../static/left-icon.png" mode=""></image>
				</view>
			</view>
		</view>
		<logonIs v-if="!token" :referral_code="referral_code"></logonIs>
	</view>
</template>
<script>
	// https://testzz.numtwin.com/h5/#/pages/ai/baogao
	  // uni.setStorageSync('user_info', JSON.stringify(data));
	import share from "../../utils/share.js";
	import logonIs from "../../components/logon_is.vue"
	import {
		Request
	} from '@/utils/request.js';
	import _data from '../../common/_data';
	export default{
		components:{
			logonIs
		},
		data(){
			return{
				token:uni.getStorageSync('token'),
				referral_code:"",
				list_id:'',
				quanbu:false,
				member:[],
				avatar:'./../../static/weixn.png',
				user_info:uni.getStorageSync('user_info'),
			}
		},
		 // uni.setStorageSync('user_info', JSON.stringify(data));
		onLoad({list_id}) {
			this.list_id=list_id;
			this.getChatDetails();
			let user_info=uni.getStorageSync('user_info');
			if(user_info){
				this.user_info=JSON.parse(user_info);
			}
		},
		computed:{
			staticPhoto () {
			  return ''
			  // _data.static_url();
			},
		},
		onShareAppMessage:share.onShareAppMessage,
		onShareAppMessage:share.onShareTimeline,
		methods:{
			navigateTo(item){
				if(this.user_info.id==item.user_id){
					this.goPages_ok('/pages/personalData/index')
				}else{
					this.goPages_ok('/pages/index/person?uid='+item.user_id)
				}
			},
			goPages_ok(path){
				uni.navigateTo({
					url:path
				})
			},
			getChatDetails(){
				Request('im/message/getChatDetails',{
					list_id:this.list_id,
				},'post').then(({member,group})=>{
					this.member=member;
					 wx.setNavigationBarTitle({
					  title: `群成员（${member.length}）`
					});
				})
			}
		}
	}
	// /im/message/getChatDetails
</script>

<style scoped>
	.info{
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 24rpx;
		padding-top: 24rpx;
		background-color: #F7F8FA;
	}
	.infoConter{
		padding-top: 24rpx;
		box-sizing: border-box;
		padding: 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.infoConter .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		padding-bottom: 24rpx;
		color: #616974;
		line-height: 36rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.conterList{
		display: flex;
		/* flex-wrap: wrap-reverse; */
		flex-wrap:wrap;
	}
	.conterList .im{
		width: 94rpx;
		height: 94rpx;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.im-conterList{
		width: 94rpx;
		height: 94rpx;
		display: flex;
		align-items: center;
		padding: 0;
		margin: 0;
		justify-content: center;
		background: #F2F4F7;
		position: relative;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	.im-conterList::after{
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%);
		width: 40rpx;
		height: 4rpx;
		background: #C3CAD5;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.im-conterList::before{
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(0,-50%);
		width: 4rpx;
		height: 40rpx;
		background: #C3CAD5;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.genex{
		width: 702rpx;
		background: #FFFFFF;
		margin-top: 16rpx;
		box-sizing: border-box;
		padding:0 24rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.genex .genexList{
		border-bottom: 1rpx solid #DCE1E8;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		
	}
	.genex .genexList:last-child{
		border: none !important;
	}
	.genexList .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #181D24;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.genexList .right{
		color: #C3CAD5;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #616974;
		text-align: right;
		display: flex;
		align-items: center;
		font-style: normal;
		text-transform: none;
	}
	.icon-conter{
		width: 40rpx;
		height: 40rpx;
	}
	
</style>